/*
 * @description:
 * @Author: zoumingyin
 * @Date: 2020-05-19 21:49:30
 * @LastEditors: zoumingyin
 * @LastEditTime: 2020-06-04 22:14:57
 */
import React, { Component } from "react";
import "./style.css";
class Item extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editor: false,
      stars: 0,
      content:""
    };
  }
  handEdit = ()=> { 
    this.setState({
      editor:true
    })
  } 
  handChange = (e)=> { 
    this.setState({
      content:e.target.value
    })
  } 
  handClick = (item)=> { 
    this.setState({
      stars:item
    })
  } 
  cancel = (item)=> { 
    this.setState({
      editor: false,
      stars: 0,
      content:""
    })
  } 
  enter = (item)=> { 
    const { id,state } = this.props.data;
    const { content, stars} = this.state
    this.setState({
      editor: false
    }) 
    this.props.submit(id,content,stars,state)
  } 
  render() {
    const { id, name, shop, state, price, src } = this.props.data;

    return (
      <div>
        <div className="item">
          <div className="item__Content">
            <div className="item_ContentImag">
              <img src={src} alt={id}></img>
            </div>
            <div className="item_ContentInfo">
              <h3>{shop}</h3>
              <h3>{name}</h3>
              <div>{price}</div>
            </div>
          </div>
          <div className="item_ContentBtn">
            {state ? (
              <button className="item_ContentBtn-gray">已评价</button>
            ) : (
              <button className="item_ContentBtn-red" onClick={this.handEdit}>未评价</button>
            )}
          </div>
        </div>
        {this.state.editor ? this.Evaluation() : null}
      </div>
    );
  }
  Evaluation() {
    return (
      <div>
        <textarea onChange={this.handChange} value={this.state.content}>
          
        </textarea>
        {this.Star()}
        <div>
          <button className="item_ContentBtn-red" onClick={this.enter}>确定</button>
          <button className="item_ContentBtn-gary" onClick={this.cancel}>取消</button>
        </div>
      </div>
    );
  }
  Star() {
    const { stars } = this.state;
    return (
      <div>
        {[1, 2, 3, 4, 5].map((item, index) => {
          if (stars <= index) {
            return (
              <span key={index} className="item_ContentBtn-gray" onClick={this.handClick.bind(this,item)}>
                ★
              </span>
            );
          } else {
            return (
              <span key={index} className="item_ContentBtn-red" onClick={this.handClick.bind(this,item)}>
                ★
              </span>
            );
          }
        })}
      </div>
    );
  }
}
// function Evaluation(star){
//   return (
//     <div>
//       <textarea>
//      </textarea>
//      <Star  stara={star.star}/>
//      <div>
//        <button>确定</button>
//        <button>取消</button>
//      </div>
//     </div>
//   )
// }

export default Item;
